﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<title>円を描くサンプル</title>
		<script src="http://www.google.com/jsapi"></script>
		<script>google.load('jquery', '1')</script>
		<style>
        .idea {
			display: -moz-box;
			display: -webkit-box;
			display: box;
            
			-moz-border-radius: 50px;  
			-webkit-border-radius: 50px;  
			border-radius: 50px;

			-moz-box-orient: horizontal;
			-webkit-box-orient: horizontal;
			box-orient: horizontal;
			
			-moz-box-pack: center;
			-moz-box-align: center;
			
			-webkit-box-pack: center;
			-webkit-box-align: center;
			
			box-pack: center;
			box-align: center;

			background-color:pink;

			width: 100px;
			height: 100px;
			
			position: absolute;
			text-align:center;
			line-height:100px;
		}
		
		#canvas {
			width: 1000px;
			height: 600px;
			//background-color:blue;
		}
		</style>
		
		<script>
		
		$(function(){
			$("div#canvas").click(function(e){
				$('<div>')
					.addClass("idea")
					.css("left", (e.pageX - 50) + "px")
					.css("top", (e.pageY - 50) + "px")
					.text("hoge!")
					.appendTo(this);
			});
		});
		
		</script>
	</head>
	<body>
		<div id="canvas"></div>
	</body>
</html>